{{Extend "layout"}}
{{Block "title"}}{{"离线下载"|T}}{{/Block}}
{{Block "breadcrumb"}}
{{Super}}
<li class="active">{{"离线下载"|T}}</li>
{{/Block}}
{{Block "main"}}
<div class="row">
	<div class="col-md-12">
		<div class="block-flat">
			<div class="header">							
				<h3>{{"离线下载"|T}}</h3>
			</div>
			<div class="content">
				
					<div class="btn-group">
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{"Task"|T}} <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu" role="menu">
						<li>
							<a href="###" data-toggle="modal" data-target="#myModal">{{"Add download"|T}}</a>
						</li>
						<li onclick="RemoveDownload()">
							<a href="###">{{"Delete download"|T}}</a>
						</li>
					  </ul>
					</div>
					
					<div class="btn-group">
					  <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
						{{"Action"|T}} <span class="caret"></span>
					  </button>
					  <ul class="dropdown-menu" role="menu">
							<li onclick="StartDownload()">
								<a href="###">{{"Start"|T}}</a>
							</li>
							<li onclick="StopDownload()">
								<a href="###">{{"Stop"|T}}</a>
							</li>
							<li class="divider"></li>
							<li onclick="StartAllDownload()">
								<a href="###">{{"Start all"|T}}</a>
							</li>
							<li onclick="StopAllDownload()">
								<a href="###">{{"Stop all"|T}}</a>
							</li>
					  </ul>
					</div>
				<div class="table-responsive">
				<table class="table no-border hover" id="fileTable">
					<thead class="no-border">
						<tr>
	<th width="30">
		<div class="checkbox checkbox-success no-margin-bottom no-margin-top">
			<input id="checkbox-all" class="styled allCheck" type="checkbox" value="-1" /><label for="checkbox-all"></label>
		</div>
	</th>
	<th width="30">#</th>
	<th width="150">{{"File Name"|T}}</th>
	<th width="100" class="hidden-xs">{{"Size"|T}}</th>
	<th width="100" class="hidden-xs">{{"Downloaded"|T}}</th>
	<th width="40" class="hidden-xs">%</th>
	<th width="100" class="hidden-xs">{{"Speed"|T}}</th>
	<th>{{"Progress"|T}}</th>
						</tr>
					</thead>
					<tbody class="no-border-y" id="fileList">
					</tbody>
				</table>		
				</div>
			</div>
		</div>				
	</div>
</div>


<script type="text/template" id="tr-template">
<tr>
<td id="chk-{Id}" class="no-padding-top">
	<div class="checkbox checkbox-success no-margin-bottom no-margin-top">
		<input id="checkbox-{Id}" class="styled idCheck" type="checkbox" value="{Id}" /><label for="checkbox-{Id}"></label>
	</div>
</td>
<td id="id-{Id}">{Id}</td>
<td id="name-{Id}">{FileName}</td>
<td id="size-{Id}" class="hidden-xs">{Size}</td>
<td id="downed-{Id}" class="hidden-xs">{Downloaded}</td>
<td id="percent-{Id}" class="hidden-xs">{Percent}</th>
<td id="speed-{Id}" class="hidden-xs">{Speed}</td>
<td id="progress-{Id}">{Progress}</td>
</tr>
</script>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
	<div class="modal-dialog">
		<!-- Modal content-->
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal">&times;</button>
				<h4 class="modal-title">{{"Enter Url"|T}}</h4>
			</div>
			<div class="modal-body">
				<div class="form-group">
					<label class="control-label">{{"Url"|T}}:</label>
					<div class="controls">
						<input type="text" onchange="OnChangeUrl()" id="url_id" class="form-control" value="https://sciter.com/sdk/sciter-sdk.zip">
					</div>
					<label class="control-label">{{"Save path"|T}}:</label>
					<div class="controls">
						<input type="text" id="save_path_id" class="form-control typeahead" data-provide="typeahead" value="sciter-sdk.zip">
					</div>
					<label class="control-label">{{"Parts count"|T}}:</label>
					<select class="form-control" id="part_count_id">
						<option>1</option>
						<option>2</option>
						<option>4</option>
						<option>8</option>
						<option>16</option>
					</select>
					<div class="modal-footer">
						<a class="btn btn-primary" onclick="AddDownload()" data-dismiss="modal">
							<i class="glyphicon glyphicon-plus"></i>
							{{"Add"|T}}
						</a>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>
{{/Block}}

{{Block "footer"}}
<script type="text/javascript">
var tableHead={fileName:'{{"File Name"|T}}',size:'{{"Size"|T}}',downloaded:'{{"Downloaded"|T}}',speed:'{{"Speed"|T}}',progress:'{{"Progress"|T}}'};
var states={Completed:'{{"Completed"|T}}',Running:'{{"Running"|T}}',Stopped:'{{"Stopped"|T}}',Failed:'{{"Failed"|T}}'};
</script>
<script type="text/javascript" src="__ASSETS__/js/sockjs.min.js"></script>
<script type="text/javascript" src="__ASSETS__/js/behaviour/download.min.js"></script>
<script type="text/javascript">
{{if Form "_pjax"}}
App.loading('hide');
sockJSRead();
{{end}}
$(function(){
App.searchFS('#save_path_id',20);
});
</script>
{{/Block}}